<template>
  <div id="register" ref="regis">
    <div class="goBack">
      <van-icon name="arrow-left" @click="goback"/>
    </div>
    <div class="icon-flag">
      <img src="../../images/regis_one.png" alt />
    </div>
    <div class="regis-body">
      <div class="inner-top_form">
        <div class="username">
          <input type="text" placeholder="请输入账号" v-model="username"/>
          <span></span>
        </div>
        <div class="password">
          <input type="text" placeholder="请输入密码" v-model="password"/>
          <span></span>
        </div>
      </div>
      <!-- 注册按钮 -->
      <div class="login-btn" @click="checkRegister">注册</div>
      <!-- 协议 -->
      <div class="agree">
        <p>
          注册即视为同意
          <a href @click.prevent>便利宝用户协议</a>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { setTimeout } from 'timers';
export default {
  data() {
    return {
        username:"",
        password:""
    };
  },
  methods: {
    changeBackgroundColor() {
      this.$nextTick(() => {
        let H = window.screen.height;
        this.$refs.regis.style.height = H + "px";
      });
    },
    goback(){
        this.$router.go(-1);
        this.$store.commit("changeTabBarHidden");
    },
    //请求注册
    checkRegister(){
        this.$http.get(`http://172.20.10.4:5000/register?username=${this.username}&password=${this.password}`)
        .then(r=>{
            let body =r.body;
            if(body.code == 200){
                this.$toast.success('注册成功！');
                setTimeout(()=>{
                    this.$router.push("/login");
                    this.$toast.clear()
                },2000)
            }else if(body.code==500){
               this.$toast.fail('用户已存在！');
            }
        })
    }
  },
  created() {
    //判断进入register路由隐藏底部
    this.$store.commit("changeTabBarShowSecond", this.$route.path);
    //设置盒子高度
    this.changeBackgroundColor();
  }
};
</script>
<style lang="less" scoped>
#register {
  width: 100%;
  height: 100%;
  background-color: #e83632;
  .goBack {
    padding-top: 0.7rem;
    .van-icon {
      font-size: 0.6rem;
      color: #ffff;
      margin-left: 0.2rem;
    }
  }
  .icon-flag {
    width: 2.56rem;
    height: 2.56rem;
    margin: 0.3rem auto;
    margin-bottom: 1.2rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .regis-body {
    .inner-top_form {
      width: 5rem;
      margin: 0 auto;
      .username {
        position: relative;
        input {
          width: 100%;
          height: 1rem;
          margin-bottom: 0;
          border-bottom: 0.03rem solid #ccc;
          border-top-left-radius: 0.1rem;
          border-top-right-radius: 0.1rem;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
          color: #1e2625;
          padding-left: 0.8rem;
        }
        span {
          display: block;
          position: absolute;
          width: 0.63rem;
          height: 0.65rem;
          background: url("../../images/regis-person.png") no-repeat center
            center;
          background-size: 0.63rem 0.65rem;
          top: 0.15rem;
          left: 0.1rem;
        }
      }
      .password {
        position: relative;
        input {
          width: 100%;
          height: 1rem;
          margin-bottom: 0;
          margin-top: -0.01rem;
          border-top-left-radius: 0;
          border-top-right-radius: 0;
          border-bottom-left-radius: 0.1rem;
          border-bottom-right-radius: 0.1rem;
          color: #1e2625;
          padding-left: 0.8rem;
        }
        span {
          display: block;
          position: absolute;
          width: 0.55rem;
          height: 0.66rem;
          background: url("../../images/regis-psd.png") no-repeat center center;
          background-size: 0.55rem 0.66rem;
          top: 0.15rem;
          left: 0.1rem;
        }
      }
    }
    .login-btn {
      width: 5rem;
      height: 1rem;
      text-align: center;
      line-height: 1rem;
      background-color: rgba(0, 0, 0, 0.4);
      margin: 0 auto;
      color: #fff;
      border-radius: 0.1rem;
      font-size: 0.4rem;
      font-weight: 700;
      margin-top: 0.35rem;
    }
    .login-btn:active {
      background-color: rgba(0, 0, 0, 0.2);
    }
    .agree {
      text-align: center;
      margin-top: 0.2rem;
      p {
        font-size: 0.18rem;
        color: #f7eadf;
        a {
          font-size: 0.2rem;
          color: #f7eadf;
          text-decoration: underline ! important;
        }
      }
    }
  }
}
</style>
